[CSS] Learn the CSS property clip-path. Circles, ellipses, polygons

We'll take a look at clip-path, which is one of the CSS style properties that is very useful when used, but wasn't used much in the past. It wasn't widely used in the past due to browser support issues, but most of the major browsers now support clip-path. However, since the clip property has been deprecated, it's best to use clip-path instead.

# Learning css clip-path

The clip-path CSS property can be used on an element to show only the desired area as if it were cut out with scissors, such as a circle, ellipsis, or polygon. To put it simply, you can show an element in a shape of a circle or a star, or even create a shape like a car.

"Using clip-path makes it easy to implement circular, elliptical, and polygonal areas."

By the way, the reason I wrote "showing by cutting out" is because when you change the mouse cursor of the area using values such as pointer: cursor;, the part actually cut out doesn't apply the styles of cursor change. Please keep this in mind.

First, let's take a look at the simple syntax.

clip-path: circle(value);
// value : radius

clip-path: ellipsis(value, value);
clip-path: polygon(value value, ...);

As you can see, the syntax is very simple. Choose the supported circle(), ellipse(), and polygon(), and declare only the values inside. Now let's create some examples and learn more.

! clip-path examples

Below are some examples to see how they are actually implemented. First, let's create a circle, an ellipse, and a polygon using css clip-path.


@ Creating a circle with clip-path, circle
First, let's look at how to cut and create a circle shape. Here's an example of creating a tag with the class name "test-path" and making the desired shape. Let's create a circle below.

Now, let's apply the style attributes as follows to create a circle. The top is the attribute to be applied commonly, and the one below is the style to be applied to distinguish between circles, ellipses, and polygons.

If you implement the above example to create a circle of radius 100px, 50px, and 25px, respectively, they will look like the following.


Each circle was created. Next, let's create an ellipse.


@ Creating an ellipse with clip-path, ellipse
Creating an ellipse is similar to the previous example. For an ellipse, you need to pass the length of the top, bottom, left, and right. Apply the css as follows.

If you implement the above example, you will get the following ellipses.

As you can see, ellipses work similarly to circles and can be implemented. Finally, let's create a polygon using the polygon.


@ Creating a polygon
To create a polygon, use the polygon and separate each value with a comma. Think of it as creating a shape by connecting each comma, and be careful that the order may also affect the shape. Now let's create some shapes below...

First, let's create a triangle shape.

Implementing the above code will result in the following.


Next, let's create a diamond shape.


When implemented, it will appear as shown below.


The diamond shape can also be easily implemented.

So far, we have looked at several examples using the clip-path property. Using clip-path has the advantage of easily implementing simple shapes. As mentioned above, it should be noted that the area where clip-path is applied includes the click area and if text is included, it will be cut off in the same way.